import {Animated, Dimensions, Image, ScrollView, View} from 'react-native';
import React, {useContext, useEffect, useRef, useState} from 'react';
import {useIsFocused, useNavigation} from '@react-navigation/native';

import CarUse from './CarUse';
// import {Flex, WhiteSpace} from '@ant-design/react-native';
import SlidingUpPanel from 'rn-sliding-up-panel';
import {SystemContext} from '../../../../Context';

function FloatPanel(props) {
    const isFocused = useIsFocused();
    const navigation = useNavigation();
    const deviceHeight = Dimensions.get('window').height;
    const slidingUpPanelProps = {
        top: deviceHeight + 250 - 60,
        bottom: 250,
    };
    const slidingUpPanel = useRef(null);
    const scrollView = useRef(null);
    // const [slidingUpPanel, setSlidingUpPanel] = useState(null);
    const [momentumDragValue, setMomentumDragValue] = useState(0);
    // const [scrollView, setScrollView] = useState(null);
    const {showHeader, setShowHeader} = useContext(SystemContext);

    const styles = {
        container: {
            flex: 1,
            backgroundColor: '#F4F4F4',
            paddingLeft: 10,
            paddingRight: 10,
            borderTopLeftRadius: 20,
            borderTopRightRadius: 20,
        },
    };

    useEffect(() => {
        if (slidingUpPanel) {
            slidingUpPanel.current.hide(); // 100
        }
    }, [slidingUpPanel]);

    useEffect(() => {
        // console.log('[TaxiPage]', isFocused, showHeader);
        if (!slidingUpPanel || !isFocused) {
            return;
        }
        if (showHeader) {
            setTimeout(() => {
                slidingUpPanel.current.hide();
                setMomentumDragValue(slidingUpPanelProps.bottom);
                scrollView.current.scrollTo({x: 0, y: 0, animated: true});
            }, 0);
        } else {
            // setTimeout(() => {
            slidingUpPanel.current.show(slidingUpPanelProps.top);
            setMomentumDragValue(slidingUpPanelProps.top);
            // }, 0);
        }
    }, [showHeader]);

    function onSlidePanelDragEnd(position, gestureState) {
        // console.log(position,gestureState)
        if (gestureState.dy < 0) {
            setShowHeader(false);
        }
    }

    function onSlidePanelMomentumDragStart(pos) {
        // console.log('Taxi [onSlidePanelMomentumDragStart]', pos, momentumDragValue);
        if (pos < momentumDragValue) {
            setShowHeader(true);
        } else if (pos > momentumDragValue) {
            setShowHeader(false);
        }
    }

    return (
        <View>
            <SlidingUpPanel
                key={'FloatPanel'}
                ref={slidingUpPanel}
                onDragEnd={onSlidePanelDragEnd}
                onMomentumDragStart={onSlidePanelMomentumDragStart}
                animatedValue={new Animated.Value(250)}
                snappingPoints={[360]}
                height={slidingUpPanelProps.top}
                friction={0.8}
                // showBackdrop={true}
                draggableRange={{
                    top: slidingUpPanelProps.top,
                    bottom: slidingUpPanelProps.bottom,
                }}>
                <View style={{flex: 1}}>
                    <View
                        style={{
                            ...styles.container,
                        }}>
                        <CarUse />
                    </View>
                </View>
            </SlidingUpPanel>
        </View>
    );
}

export default FloatPanel;